<template>
  <div class="about">
    <div class="container container-1">
      <hong-grid :options="options1" @click="handleClick"></hong-grid>
    </div>
    <div class="container container-2">
      <hong-grid :options="options2" gridStyle="split" @click="handleClick"></hong-grid>
    </div>
    <div class="container container-3">
      <p class="item">
        <hong-count-up :start="10000" :end="11597"></hong-count-up>
      </p>
      <p class="item">
        <hong-count-up :start="0" :end="data"></hong-count-up>
      </p>
      <p class="item">
        <hong-count-up :start="0" :end="125.22" :decimals="2"></hong-count-up>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'About',
  data () {
    return {
      options1: {
        iconColor: '',
        textColor: '',
        bg: '',
        round: '',
        items: [
          {
            label: '停车',
            // 默认使用mand-mobile图标库
            defaultIcon: false,
            icon: 'iconfont iconicon_kdsz',
            // img: 'https://cdn.yuuwei.com/hong-form-doc/7.png',
            // 背景颜色 #665C8B
            bg: '',
            // 字体颜色 #fff
            iconColor: '',
            textColor: '',
            // 圆角 18px
            round: '',
            url: '/form-details'
          },
          {
            label: '拍照积分',
            defaultIcon: false,
            icon: 'iconfont iconicon_xxqg',
            url: 'https://www.baidu.com'
          },
          {
            label: '商场简介',
            defaultIcon: false,
            icon: 'iconfont iconxinxuanshangcheng',
            url: '/form-details'
          },
          {
            label: '智慧',
            icon: 'discovery',
            url: '/form-details'
          },
          {
            col: 2,
            label: '优选好券',
            img: 'https://cdn.yuuwei.com/hong-form-doc/7.png',
            url: '/form-details'
          },
          {
            col: 2,
            label: '店铺导航',
            defaultIcon: false,
            icon: 'iconfont iconicon_fkhdtj_n',
            url: '/form-details'
          }
        ]
      },
      options2: {
        iconColor: '',
        bg: '',
        textColor: '',
        round: '',
        items: [
          {
            label: '停车',
            // 默认使用mand-mobile图标库
            defaultIcon: false,
            icon: 'iconfont iconicon_kdsz',
            // img: 'https://cdn.yuuwei.com/hong-form-doc/7.png',
            // 背景颜色 #665C8B
            bg: 'red',
            // 字体颜色 #fff
            iconColor: '#000',
            textColor: 'blue',
            // 圆角 18/18%
            round: '24%',
            url: '/form-details'
          },
          {
            label: '拍照积分',
            defaultIcon: false,
            icon: 'iconfont iconicon_xxqg',
            url: 'https://www.baidu.com'
          },
          {
            label: '商场简介',
            defaultIcon: false,
            icon: 'iconfont iconxinxuanshangcheng',
            url: '/form-details'
          },
          {
            label: '优选好货',
            defaultIcon: false,
            icon: 'iconfont iconicon_wxdj',
            url: '/form-details'
          },
          {
            label: '优选好券',
            img: 'https://cdn.yuuwei.com/hong-form-doc/7.png',
            url: '/form-details'
          },
          {
            col: 1,
            label: '店铺导航',
            defaultIcon: false,
            icon: 'iconfont iconicon_fkhdtj_n',
            url: '/form-details'
          },
          {
            label: '智慧',
            icon: 'discovery',
            url: '/form-details'
          },
          {
            label: '餐厅',
            defaultIcon: false,
            icon: 'iconfont iconxinxuanshangcheng',
            url: '/form-details'
          }
        ]
      },
      data: 23250
    }
  },
  created () {
    setTimeout(() => {
      this.data = 23350
    }, 1000)
  },
  methods: {
    handleClick ({ item, done }) {
      console.log(item)
      // done()
    }
  }
}
</script>

<style lang="stylus" scoped>
.container
  padding .24rem .24rem 0 .24rem
.container-1
  background #373C74
.container-3
  .item
    margin-bottom .24rem
    font-size .4rem
    color red
    font-family '微软雅黑'
.about
  height 100%
</style>
